import React, {FC} from 'react';
import {Card, Descriptions, Drawer, Spin, Tabs} from 'antd';
import styles from '@/utils/utils.less'
import service from '../service'
import {SysModuleModel} from '../data';
import HistoryLogTable from '@/components/HistoryLog';
import {isAdminUser} from "@/utils/utils";
import StatusTag from "@/components/StatusTag";
import useLoad from "@/hooks/useLoad";
import {DetailsDialogProps} from "@/global";

const {TabPane} = Tabs;

/** 系统模块详情组件 */
const Details: FC<DetailsDialogProps> = (props) => {
  const {params: {id}, visible, hide} = props;
  const {loading, data: model} = useLoad<SysModuleModel>({
    isLoad: Boolean(id),
    onLoad: () => service.selectById(id)
  }, [id]);

  return (
    <Drawer
      title="查看模块详细信息"
      width="50%"
      visible={visible}
      onClose={hide}
      destroyOnClose
      className={styles.drawerBodyPadding}>
      <Spin spinning={loading} wrapperClassName={styles.h100p}>
        <Tabs className={styles.drawerBodyTabsPadding}>
          <TabPane tab="基本信息" key="basic">
            {model && (
              <Card bordered={false} className={styles.cardBodyDesc}>
                <Descriptions column={1} bordered={true} size="small" className={styles.detailsDescriptions}>
                  {isAdminUser() && (<Descriptions.Item label="模块主键">{model.id}</Descriptions.Item>)}
                  <Descriptions.Item label="上级主键">{model.parentId}</Descriptions.Item>
                  <Descriptions.Item label="模块名称">{model.name}</Descriptions.Item>
                  <Descriptions.Item label="模块编码">{model.code}</Descriptions.Item>
                  {model.param && (<Descriptions.Item label="模块参数">
                    <pre>{model.param}</pre>
                  </Descriptions.Item>)}
                  <Descriptions.Item label="序号">{model.path}</Descriptions.Item>
                  {model.web && (
                    <>
                      <Descriptions.Item label="Web图标">
                        {model.webCls && (<i className={model.webCls + " fa-lg"}/>)} {model.webCls}
                      </Descriptions.Item>
                      <Descriptions.Item label="Web路径">{model.webUrl}</Descriptions.Item>
                      {model.webSetting && (<Descriptions.Item label="Web配置选项">
                        <pre>{model.webSetting}</pre>
                      </Descriptions.Item>)}
                    </>
                  )}
                  {model.win && (
                    <>
                      <Descriptions.Item label="Win图标">{model.winCls}</Descriptions.Item>
                      <Descriptions.Item label="Win路径">{model.winUrl}</Descriptions.Item>
                      {model.winSetting && (<Descriptions.Item label="Win配置选项">
                        <pre>{model.winSetting}</pre>
                      </Descriptions.Item>)}
                    </>
                  )}
                  <Descriptions.Item label="选项">
                    <StatusTag status={model.status || false} trueLable="启用" falseLable="禁用"/>
                    <StatusTag status={model.menu || false} trueLable="菜单" falseLable="权限"/>
                    <StatusTag status={model.expand || false} trueLable="展开" falseLable="折叠"/>
                    <StatusTag status={model.publiced || false} trueLable="公开" falseLable="不公开"/>
                  </Descriptions.Item>
                  <Descriptions.Item label="备注">{model.remark}</Descriptions.Item>
                </Descriptions>
              </Card>
            )}
          </TabPane>
          <TabPane tab="操作日志" key="history">
            {model && (<HistoryLogTable tableName="SysModule" primaryKey={model.id}/>)}
          </TabPane>
        </Tabs>
      </Spin>
    </Drawer>
  );
};

export default React.memo(Details);

